const { Table, Button, Tooltip, Input, Icon, Modal, message, Switch } = antd;

class MiApi extends React.Component {
    constructor(props) {
        super(props);
        this.columns = [];
        this.editcolumn = {
            title: '操作',
            key: 'operation',
            align: "center",
            render: (text, record) => {
                return <div>
                    <Tooltip title="编辑">
                        <Icon type="edit" onClick={this.showUpdateModal.bind(this, record)} />
                    </Tooltip>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <Tooltip title="删除">
                        <Icon type="delete" onClick={this.delete.bind(this, { id: record.id, parent_id: record.parent_id })} />
                    </Tooltip>
                </div>;
            }
        };
        M.MiApi_this = this;
        this.state = {
            record: {},
            Alldate: [],
            visible: false,
            total: 0,
            name: '',
            status: '2',
            startPage: 1,
            limit: 10,
            visible: false,
            modelType: "add",
            parent_id: props.parent_id,
            formformat: [{
                "key": "id",
                "note": "id",
                "value": "1",
                "dateFormat": {
                    "dateType": "String"
                }
            },
            {
                "key": "name",
                "note": "名称",
                "value": "zs",
                "dateFormat": {
                    "dateType": "String"
                }
            },
            {
                "key": "description",
                "note": "描述",
                "value": "15067374384",
                "dateFormat": {
                    "dateType": "String"
                }
            }
        ]};

    }
    componentDidMount() {
        M.MiApi_this.flush(-1);
    };
    componentWillMount() {

    }
    componentWillUnmount() {
        this.setState = (state, callback) => {
            return
        }
    }
    flush(parent_id) {
        this.state.parent_id = parent_id;
        MIO.miApiListByPage({ "startPage": this.state.startPage, "limit": this.state.limit,"name":this.state.name }).then(d => {
            const Alldate = M.global.maplist(d.rows);
            console.log(Alldate)
            M.MiApi_this.setState({
                Alldate: Alldate,
                total: d.total
            })
        });
    }

    addOrUpdate = () => {
        const { form } = this.formRef.props;
        form.validateFields((err, values) => {
            if (err) {
                message.error("ng")
                return;
            } else {
                let values = form.getFieldsValue()
                this.state.visible = false;
                if (this.state.modelType == "add") {
                    MIO.miApiAdd(values).then(d => {
                        M.MiApi_this.flush();
                        message.success("ok")

                    })
                } else {
                    MIO.miApiUpdate(values).then(d => {
                        M.MiApi_this.flush();
                        message.success("ok")

                    })
                }
            }
        });

    };
    delete(r) {
        let r1 = window.confirm("确认删除qq" + JSON.stringify(r) + "?");
        console.log("r1",r1)
        if (r1) {
            console.log("QQ",r)
            MIO.miApiDelete(r).then(d => {
                M.MiApi_this.flush();
                message.success("ok")

            })
        }
    }
    onTableChange(current, pageSize) {
        const state = this.state;
        state.startPage = current;
        state.limit = pageSize;
        M.MiApi_this.flush();
    }
    onRecordChange(text, record, checked) {
        let f;
        true == checked ? f = 1 : f = 0;
        MIO.miApiSetStatus({ id: record.id, status: f })
        M.MiApi_this.flush();
    }
    showAddModal = (record) => {
        this.setState({
            visible: true,
            modelType: "add",
            record: {}
        });
    };
    showUpdateModal = (record) => {
        const { form } = this.formRef.props;
        form.resetFields();
        this.setState({
            visible: true,
            modelType: "update",
            record: record
        });
    };
    handleCancel = e => {
        const { form } = this.formRef.props;
        form.resetFields();
        this.setState({
            visible: false,
        });
    };
    searchData = e => {
        const name = e.target.value;
        this.state.name=name;
        M.MiApi_this.flush();
    }

  


    render() {
        this.columns = this.state.formformat.map((u) => { let o = {}; o.dataIndex = o.title = o.key = u.key; 
               if(u.dateFormat.dateType=="Bool"){
                   //alert(7)
                  o.render=text =>  {return text?"是":"否" } 
               }
              return o;
         })
        this.columns = [...this.columns, this.editcolumn]
        const configTemplate=this.state.formformat.map((u) => { let o = {};  o=u; o.value=this.state.record[o.key]; return o; })
        return (
            <div>
                <Input
                    type="text"
                    placeholder="name"
                    defaultValue={""}
                    onChange={this.searchData}
                    style={{ width: '30%', marginRight: '3%' }}
                />
                <Button type="primary" onClick={this.showAddModal}>添加</Button>
        
                <Table dataSource={this.state.Alldate} columns={this.columns} pagination={false} />
                <br /><br /><br />

                <MiApiForm
                    title={this.state.modelType + "(parent_id|id)" + this.state.parent_id + "|" + this.state.record.id}
                    wrappedComponentRef={(form) => this.formRef = form}
                    visible={this.state.visible}
                    configTemplate={configTemplate}
                    parent_id={this.state.parent_id}
                    onCancel={this.handleCancel}
                    onCreate={this.addOrUpdate} />
                <antd.Pagination
                    showSizeChanger showQuickJumper
                    defaultCurrent={1}
                    total={this.state.total}
                    onChange={this.onTableChange.bind(this)}
                    onShowSizeChange={this.onTableChange.bind(this)}
                    pageSizeOptions={["5", "10", "20"]}
                />
            </div>
        )
    }
}











